route-manifest

route-manifest

A tiny (412B) runtime to retrieve the correct entry from a Route Manifest file.

This is the runtime/client-side component for webpack-route-manifest.
It is required that your manifest's routes be sorted by specificity, which is the webpack plugin's default setting.

Important: This route-manifest does not fetch files or apply headers on your behalf!

The module is available in three formats:

• ES Module: dist/rmanifest.mjs
• CommonJS: dist/rmanifest.js
• UMD: dist/rmanifest.min.js

Install

$ npm install --save route-manifest

Usage

import { preload } from 'quicklink';
import rmanifest from 'route-manifest';

// Manually fetch Manifest file contents
fetch('/manifest.json').then(r => r.json()).then(data => {
  /*
    Assume Manifest (`data`) is:
    {
      [pattern]: {
        files: { href: string, type: string }
        headers: [...skip...]
      }
    }
  */

  const files = new Set();

  // We want to preload these pages' assets
  ['/blog', '/about', '/features'].forEach(str => {
    let entry = rmanifest(data, str);
    entry.files.forEach(x => files.add(x.href));
  });

  // Note:
  //   The `quicklink` module will do the actual prefetching!
  //   We just have have to give it a file path, or an array
  //   of file paths in this case~!
  return preload([...files]);
});

API

rmanifest(contents, uri, withCommons)

Returns: { files: Array, headers: Array }

Returns an object containing files and headers keys, both of which will be arrays. The arrays' items are copied from your Manifest file directly, so you will (presumably) already know the shape of your data.

contents

Type: Object

The Manifest file's contents.
Any format returned by webpack-route-manifest is valid.

Important: The route pattern keys must be sorted for matching correctness.

uri

Type: String

The URL for which you want to find files or headers.

Note: Only include the pathname segment of a URL, unless a pattern is explicitly looking for other segments.

withCommons

Type: Boolean
Default: false

Whether or not the base/root-wildcard entry should be included.

When true and when a "*" pattern is defined, this will include the wildcard's entry in addition to the route's own specific entry too, if any. The result is still a single object of { files, headers } shape – the difference is just that the two entries have their keys' items concatenated into a single array.

When false, this module will only return the entry specific to the requested uri pathname.

Related

• webpack-route-manifest – generate a Route Manifest file for your webpack build
• quicklink – preloading utility that reacts to connection speed and browser support
• route-sort – the route pattern sorter required for safe sequential matching

License

MIT © Luke Edwards